<script setup lang="ts">
//引入
import { UseUserStore } from '@/store'
import { http } from '@/utils/http'
import { ref } from "vue"
const userStore = UseUserStore()
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from "./components/CategoryPanel.vue"
import HotPanel from "./components/HotPanel.vue"
import IndexSkeleton from './components/IndexSkeleton.vue';

import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from "@/services/home"
import { onLoad } from '@dcloudio/uni-app';
import type { BannerItem, CategoryItem, HotItem } from '@/types/home';
import type { XtxGuessInstance } from '@/types/component';

//接收数据
const BannerList = ref<BannerItem[]>([])
const getBannerList = async () => {
  const res = await getHomeBannerAPI()
  BannerList.value = res.result
}

//接受分类数据
const CategroyList = ref<CategoryItem[]>([])

const getCategroyList = async () => {
  const res = await getHomeCategoryAPI()
  CategroyList.value = res.result
}

//接受热门
const HotList = ref<HotItem[]>([])

const getHotList = async () => {
  const res = await getHomeHotAPI()
  HotList.value = res.result
}
const xtxGuessCom = ref<XtxGuessInstance>()
const getMoreGuess = () => {
  xtxGuessCom.value?.getMore()
}

const isLoading = ref(true)

onLoad(async (Option) => {
  isLoading.value = true
  await Promise.all([
    getBannerList(),
    getCategroyList(),
    getHotList(),
  ])
  isLoading.value = false
})
//下拉刷新
const isReflesh = ref(false)
const resherrefresh = async () => {
  isReflesh.value = true
  xtxGuessCom.value?.resetData()
  await Promise.all([getBannerList(), getCategroyList(), getHotList()])
  isReflesh.value = false
}
</script>

<template>
  <!-- 自定义头部 -->
  <CustomNavbar></CustomNavbar>


  <scroll-view refresher-enabled :refresher-triggered="isReflesh" @refresherrefresh="resherrefresh"
    @scrolltolower="getMoreGuess()" class="scrollView" scroll-y>
    <IndexSkeleton v-if="isLoading"></IndexSkeleton>
    <template v-else>
      <!-- 轮播区域 -->
      <XtxSwiper :list="BannerList"></XtxSwiper>
      <!-- 分类区域 -->
      <CategoryPanel :list="CategroyList"></CategoryPanel>
      <!-- 热门 -->
      <HotPanel :list="HotList"></HotPanel>
      <!-- 喜欢 -->
      <XtxGuess ref="xtxGuessCom"></XtxGuess>
    </template>
  </scroll-view>



</template>

<style lang="scss">
// 首页样式
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollView {
  flex: 1; //占据剩余空间的分数
}
</style>
